<template>
  <div class="content">
    <div id="mapContainer" style="width: 100%; height: 400px" />
    <div class="search">
      <el-autocomplete
        popper-class="my-autocomplete"
        clearable
        :debounce="1000"
        v-model="searchText"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
      >
        <template slot-scope="{ item }">
          <div class="name">{{ item.value }}</div>
          <span class="addr">{{ item.address }}</span>
        </template>
      </el-autocomplete>
    </div>
  </div>
</template>

<script>
export default {
  name: "MapBox",
  props: {
    searchCity: {
      type: String,
    }, // 省市区
    searchCont: {
      type: String,
    }, // 具体位置
    latitude: {
      type: String, // 已选定的坐标
    },
  },
  data() {
    return {
      marker: "",
      map: null,
      num: 0,
      suggestionList: [],
      search: null,
      suggest: null,
      searchText: "",
      region: "石家庄",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    querySearchAsync(queryString, cb) {
      let that = this;
      console.log(queryString);
      if (queryString.length == 0) {
        cb([]);
        return false;
      }
      that.suggest
        .getSuggestions({
          keyword: queryString,
          location: that.map.getCenter(),
        })
        .then((result) => {
          let suggestionList = result.data;
          suggestionList.forEach((e) => {
            e.value = e.title;
          });
          cb(suggestionList);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSelect(item) {
      this.map.setCenter(new TMap.LatLng(item.location.lat, item.location.lng));
    },
    cityBox(region) {
      this.region = region;
      this.map.destroy();
      this.init();
    },
    init() {
      let that = this,
        region = this.region,
        geocoder = new TMap.service.Geocoder();
      geocoder.getLocation({ address: region }).then((res) => {
        var center = new TMap.LatLng(
          res.result.location.lat,
          res.result.location.lng
        );
        //初始化地图
        that.map = new TMap.Map("mapContainer", {
          center: center,
        });

        that.search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
        that.suggest = new TMap.service.Suggestion({
          pageSize: 10, // 返回结果每页条目数
          region: region, // 限制城市范围
          regionFix: true, // 搜索无结果时是否固定在当前城市
        });

        var markerGeo = {
          id: "center",
          position: that.map.getCenter(),
        };

        // 创建一个位于地图中心点的marker
        let markerLayer = new TMap.MultiMarker({
          map: that.map,
          geometries: [markerGeo],
        });

        // 监听中心点变化事件，更新marker的位置
        that.map.on("center_changed", () => {
          markerGeo.position = that.map.getCenter();
          markerLayer.updateGeometries([markerGeo]);
        });

        //监听地图开始平移
        that.map.on("panstart", function () {});
        //监听地图平移
        that.map.on("pan", function () {});
        //监听地图平移结束
        that.map.on("panend", function () {
          geocoder
            .getAddress({ location: that.map.getCenter() }) // 将给定的坐标位置转换为地址
            .then((result) => {
              //   console.log(result)
              that.$emit("proLocation", result);
            });
        });
      });
    },
    getGps() {
      return this.marker.getPosition();
    },
  },
};
</script>

<style scoped lang="scss">
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;
    .name {
      line-height: 25px !important;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
      line-height: 25px !important;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

.content {
  position: relative;
  width: 100%;
  height: 400px;
}
.search {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 9999;
}
</style>
